<template>
    <div class="link-table">
        <el-table
                :data="tableData3"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="url"
                    label="网址"
                    width="180">
                <template slot-scope="scope">
                    <a @click="gotoView(scope.row.url)">{{scope.row.url}}</a>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="type"
                    :filters="typeArray"
                    :filter-method="filterTag"
                    filter-placement="bottom-end"
                    label="用户类型">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="delectRow(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
    export default {
        props:["tableData3"],
        data() {
            return {
                //todo:ajax请求到自己的
                typeArray: [{ text: 'search', value: 'search' },{ text: 'search', value: 'search1' },{ text: 'search', value: 'search2' }]
            }
        },
        methods:{
            filterTag(value, row) {
                return row.type === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            //todo:删除行，需要提交到服务台
            delectRow(row){
                this.$emit('deleteRow', row)
            },
            gotoView(urlVal){
                urlVal = /^http[s]?:\/\//.test(urlVal)?urlVal:"http://"+ urlVal;
                window.open(urlVal);
            }
        },
        computed:{
            getTableDate(){
                console.log(this.tableData3)
                return this.tableData3;
            }
        }
    }
</script>